<template>
  <view class="card-item" @click="onCardClick">
    <image v-if="imgName" :src="`/static/${imgName}.png`" alt class="img" ></image>
    <view v-else class="dot"></view>
    <view :class="rows == 1 ? 'one' : ''">
      <view class="text" :class="{limit: rows==1}">{{text}}:</view>
      <view class="num">{{num}}<text>{{unit}}</text></view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const emits = defineEmits(['onCardClickHandler'])

const props = defineProps({
  imgName: String,
  text: String,
  num: [Number, String],
  rows: { type: Number, default: 1 },
  unit: String
});

const onCardClick = () => {
  emits('onCardClickHandler', props)
}



</script>

<style lang="scss" scoped>

.dot {
  width: 13rpx;
  height: 13rpx;
  background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
  border-radius: 100%;
  margin: 0 16rpx;
}
.card-item {
  display: flex;
  width: 50%;
  align-items: center;
  margin-top: 30rpx;
}
.one {
  display: flex;
  align-items: center;
}
.img {
  width: 79rpx;
  height: 79rpx;
}
.text {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1d20;
  margin-left: 18rpx;
  line-height: 45rpx;
}
.limit {
  max-width: 120rpx;
}
.num {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #455bdf;
  margin-left: 18rpx;
  line-height: 45rpx;
  text {
    font-weight: normal;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #455BDF;
  }
}
</style>